<template>
  <el-scrollbar height="365px">
    <div class="game-pre">
      <div class="game-head">
        <a :href="preData.head[0] && preData.head[0].link" target="_blank">{{
          preData.head[0] && preData.head[0].title
        }}</a>
        <div class="head-box">
          <div class="img">
            <img
              :src="preData.head[0] && preData.head[0].img"
              alt=""
              style="width: 100%; height: 100%; transition: all 0.3s"
            />
          </div>
          <p>
            {{ preData.head[0] && preData.head[0].introduce }}
          </p>
        </div>
      </div>
      <div class="game-list">
        <div
          class="link-item"
          v-for="(item, index) in preData.links"
          :key="index"
        >
          <span
            :class="{
              seq: true,
              seqFirst: index === 0,
              seqSecond: index === 1,
              seqThird: index === 2,
            }"
            >{{ index + 1 }}</span
          ><a :href="item.link" target="_blank">{{ item.title }}</a>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { onUpdated, reactive } from "vue";
const props = defineProps({
  pre: Array,
});

const preData = reactive({
  head: [],
  links: [],
});

onUpdated(() => {
  handlePreData();
});

// 打包pre数据
const handlePreData = () => {
  preData.head = props.pre[0];
  preData.links = props.pre[1];
};
</script>

<style scoped lang="less">
.game-pre {
  display: flex;
  flex-direction: column;
  align-items: center;
  .game-head {
    a {
      display: inline-block;
      height: 26px;
      overflow: hidden;
      font-size: 25px;
      color: #505050;
      font-weight: bold;
      margin: 10px 0;
    }
  }
  .head-box {
    display: flex;
    align-items: center;
    .img {
      width: 120px;
      height: 80px;
      overflow: hidden;
      border-radius: 5px;
      &:hover img {
        transform: scale(1.1);
      }
    }
    p {
      width: 250px;
      font-size: 12px;
      height: 56px;
      line-height: 18px;
      margin-left: 20px;
      color: #8c8c8c;
    }
  }
  .game-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    margin-right: 30px;
    .link-item {
      margin: 5px 0;
      .seq {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 5px;
        background-color: #e2e2e2;
        color: #000;
        text-align: center;
        line-height: 20px;
      }
      a {
        font-size: 14px;
        &:hover {
          color: rgb(252, 103, 95);
        }
      }
      .seqFirst {
        background-color: #fe2d46;
        color: white;
      }
      .seqSecond {
        background-color: #ff6600;
        color: white;
      }
      .seqThird {
        background-color: #faa90e;
        color: white;
      }
    }
  }
}
</style>
